<template>
  <div class="container" curPageName="669879079fferterf567ab">
    <div class="content">
      <el-avatar :size="70" :src="data.avatar" />
      <div class="info">
        <div class="info-header">
          <div class="info-header--title">
            <span>{{ data.employee_name }}</span>

            <MerakIcon size="14" :color="data.sex_val === 0 ? '#FF619A' : '#0BADEC'">
              <template v-if="data.sex_val === 0">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M12,4A6,6 0 0,1 18,10C18,12.97 15.84,15.44 13,15.92V18H15V20H13V22H11V20H9V18H11V15.92C8.16,15.44 6,12.97 6,10A6,6 0 0,1 12,4M12,6A4,4 0 0,0 8,10A4,4 0 0,0 12,14A4,4 0 0,0 16,10A4,4 0 0,0 12,6Z"
                  />
                </svg>
              </template>
              <template v-else>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M9,9C10.29,9 11.5,9.41 12.47,10.11L17.58,5H13V3H21V11H19V6.41L13.89,11.5C14.59,12.5 15,13.7 15,15A6,6 0 0,1 9,21A6,6 0 0,1 3,15A6,6 0 0,1 9,9M9,11A4,4 0 0,0 5,15A4,4 0 0,0 9,19A4,4 0 0,0 13,15A4,4 0 0,0 9,11Z"
                  />
                </svg>
              </template>
            </MerakIcon>
          </div>
          <div class="info-header--content">
            <div class="info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z"
                  />
                </svg>
              </MerakIcon>
              <span>{{ data.office_location_id }}</span>
            </div>
            <div class="info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z" />
                </svg>
              </MerakIcon>
              <span>{{ data.mobile }}</span>
            </div>
            <div class="info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z"
                  />
                </svg>
              </MerakIcon>
              <span>{{ data.job_no }}</span>
            </div>
          </div>
        </div>
        <div class="info-footer">
          <span>{{ $t("staff_list.company") }}&#58;&nbsp;{{ data.org_company }}</span>
          <span>{{ $t("staff_list.department") }}&#58;&nbsp;{{ data.org_department }}</span>
          <span>{{ $t("staff_list.position") }}&#58;&nbsp;{{ data.org_title }}</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- <el-button type="primary" plain @click="link(data.user_id, ComponentKeys.user)">{{
        $t("staff_list.personal_info")
      }}</el-button>
      <el-button type="primary" plain @click="link(data.user_id, ComponentKeys.job)">{{
        $t("staff_list.on_the_job_info")
      }}</el-button>
      <el-button type="primary" plain @click="link(data.user_id, ComponentKeys.contract)">{{
        $t("staff_list.contract_info")
      }}</el-button>
      <el-button type="primary" plain @click="link(data.user_id, ComponentKeys.annex)">{{
        $t("staff_list.material_attachments")
      }}</el-button> -->
 
      <el-button 
     
        type="primary" plain @click="link(data.user_id, ComponentKeys.user)">
        {{ $t("staff_list.personal_info") }}
      </el-button>
      <el-button

        type="primary"
        plain
        @click="link(data.user_id, ComponentKeys.newsletter)"
      >
        {{ $t("staff_list.newsletter_info") }}
      </el-button>
      <el-button
  
        type="primary"
        plain
        @click="link(data.user_id, ComponentKeys.education)"
      >
        {{ $t("staff_list.education_info") }}
      </el-button>
      <el-button 
      type="primary" plain @click="link(data.user_id, ComponentKeys.job)">
        {{ $t("staff_list.on_the_job_info") }}
      </el-button>
      <el-button
    
        type="primary"
        plain
        @click="link(data.user_id, ComponentKeys.contract)"
      >
        {{ $t("staff_list.contract_info") }}
      </el-button>
      <el-button 
      type="primary" plain @click="link(data.user_id, ComponentKeys.annex)">
        {{ $t("staff_list.material_attachments") }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, computed } from "vue";
import router from "@/routers";
import { ElButton, ElAvatar } from "element-plus";
import { UserAuthType,getUserAuth } from "@/api/modules/user";
import MerakIcon from "@/components/MerakIcon/index.vue";
import { 
  authList,
} from "@/api/modules/personalManagementApi/contract";
import { ComponentKeys } from "../items";
const props = defineProps<{ auth?: UserAuthType; data: Record<string, any>,auths:any }>();
  const authR=props.auths;
const { auth, data } = toRefs(props);
const link = (id: number | string, type?: ComponentKeys) => {
  router.push({ name: "employeesInfo", query: { id, type, open: "false" } });
};
</script>

<style scoped lang="scss">
.container {
  margin: calc(0px - var(--el-popover-padding));
}
.content {
  display: flex;
  padding: 20px 27px;
  min-width: 500px;
  .info {
    flex: auto;
    margin-left: 16px;
    min-width: 0;
    &-header {
      &--title {
        display: flex;
        align-items: center;
        & > span {
          margin-right: 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }
      &--content {
        display: flex;
        align-items: center;
        margin-top: 12px;
        width: 100%;
        & > * {
          flex: auto;
        }
      }
    }
    &-footer {
      display: flex;
      flex-direction: column;
      margin-top: 38px;
      font-size: 14px;
      & > :not(:first-child) {
        margin-top: 15px;
      }
    }
    &-tag {
      display: inline-flex;
      align-items: center;
      & > span {
        margin-left: 3px;
      }
    }
  }
}
.footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 92px));
  justify-content: space-around;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--merak-border-color);
  .el-button {
    margin: 0 !important;
  }
}
</style>
